<template>
	<view class="component-list-container flex">
		<view 
			class="component-item flex"
			v-for="item,index in componentlist"
			:key="item.path"
			@click="selectItem(item.path)"
		>
			<text>{{item.title}}</text>
			<image class="arrow" src="../../static/icons/arrow-right.png" />
		</view>
	</view>
</template>

<script setup>
import {componentlist} from '@/plugins/component-mock'

function selectItem(url) {
	if (!url) {
		uni.showModal({
			showCancel: false,
			content: '无页面路径'
		})
		return
	}
	uni.navigateTo({url})
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/mixin.scss';

page {
	@include flexCenter();
	background-color: $bg-s;
}

.component-list-container {
	flex-direction: column;
	margin-top: $base-margin-s;
	.component-item {
		padding: $base-padding;
		@include wh(652rpx, 30rpx);
		background-color: $bg-p;
		margin: $base-margin-s 0;
		justify-content: space-between;
		@include sc($font-size-p, $font-color-d);
		.arrow {
			@include wh(28rpx, 28rpx);
		}
	}
}
</style>